<template>
  <div id="view-userInfoTable-page">
    <el-form ref="infoForm" :model="infoForm" label-width="80px" class="infoForm">
      <el-form-item label="昵称">
        <fcInput v-model="infoForm.name" placeholder="昵称"></fcInput>
      </el-form-item>
      <el-form-item label="描述">
        <fcInput type="textarea" placeholder="描述" v-model="infoForm.description"></fcInput>
      </el-form-item>
      <el-form-item label="邮箱">
        <fcInput v-model="infoForm.email" placeholder="邮箱"></fcInput>
      </el-form-item>
      <el-form-item label="性别" align="left">
        <fcInput v-model="infoForm.sex" type="radio">
          <template v-slot:radio>
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
            <el-radio label="0">未知</el-radio>
          </template>
        </fcInput>
      </el-form-item>
      <el-form-item label="头像" align="left">
        <upload-field v-model="infoForm.avatar" />
      </el-form-item>
      <el-form-item label="背景" align="left">
        <upload-field v-model="infoForm.backImg" width="300px" />
      </el-form-item>
      <el-form-item label="手机号">
        <fcInput v-model="infoForm.tel" placeholder="手机号"></fcInput>
      </el-form-item>
      <el-form-item label="地址">
        <fcInput type="textarea" v-model="infoForm.address" placeholder="地址"></fcInput>
      </el-form-item>
    </el-form>
    <tableBtnBar-field @confirm="save" :isCancelShow="false" confirmStr="保存">
    </tableBtnBar-field>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import UploadField from '@/components/UploadField'
import TableBtnBarField from '@/components/TableBtnBarField'
import { updateUserInfoApi } from '@/api/userInfo'
import { getCookie } from '@/utils/common'
export default {
  name: 'userInfoTable-page',
  components: {
    [UploadField.name]: UploadField,
    [TableBtnBarField.name]: TableBtnBarField
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  data() {
    return {
      infoForm: {}

    }
  },
  created() {
    this.infoForm = this.userInfo
  },
  methods: {
    ...mapActions('user', ['getUserInfo']),
    save() {
      let params = this.userInfo
      delete params.updateTime
      delete params.createTime

      updateUserInfoApi(params).then(res => {
        console.log('res', res)
        this.getUser()
      })
    },
    getUser() {
      const params = {
        id: !$chy.isEmpty(getCookie('user')) ? JSON.parse(getCookie('user')).id : ''
      }
      this.getUserInfo(params).then(res => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#view-userInfoTable-page {

  .infoForm {
    padding: 20px 40px 20px 10px;
    width: 100%;
    box-sizing: border-box;
  }
}
</style>